<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" href="${pageContext.request.contextPath}/cts/css/screen.css" type="text/css" media="screen, projection"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/cts/css/print.css" type="text/css" media="print"/>
<!--[if lt IE 8]><link rel="stylesheet" href="${pageContext.request.contextPath}/cts/css/ie.css" type="text/css" media="screen, projection"><![endif]-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/cts/css/ps.css" type="text/css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/cts/js/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/cts/js/jqueryui.js"></script>
	<style>
	 .ui-state-highlight {
            border: 2px dashed #666;
            margin-top:6px;
            list-style-type: none;
            height: 30px;
        }

    .sortable-container .ui-sortable-li {
            border: 1px solid #CCCCFF;
            color: #000;
            padding: 6px;
            cursor: move;
            font-size: 12px;
            position: relative;
            list-style-type: none;
        }

    .ui-sortable-helper {
        border:1px dashed;
    }
    
   	.ulClass {WIDTH: 700px; MARGIN-LEFT: 0px; PADDING-BOTTOM: 10px; MARGIN-BOTTOM: 10px; MARGIN-TOP: -10px; text-align: left;}
    	
    .liClass{
		list-style-type:none;
		padding:4px;
		list-style-position:outside;
	 	border:1px solid #FCEFA1; background:#FBF9EE;
		margin:6px;
	 	line-height:24px;
	 	float:left;
	 	width:150px;
	 	text-align:center;
	 	cursor: pointer;
	 	color:black;
	}
	</style>
</head>
<script type="text/javascript">
 $(".question_type_b").sortable({opacity:0.6, placeholder: 'ui-state-highlight'});
    $(".ui-sortable-li").hover(
        function() {
            $(this).addClass('ui-sortable-li-hover').find('img').show();
        },
        function() {
            $(this).removeClass('ui-sortable-li-hover').find('img').hide();
        }
   );
  
   $(function() {
        $("#selectedDic").sortable({ 
            connectWith: ["#selectedDic"] 
        });
    })
    
    function saveOrder(){
        var param = $("#selectedDic").sortable('toArray');
        $("#param").val(param);
        $.ajax({
			type:"POST",
			url:"cts/saveDataOrder.action",
			async: false,
			data:$("#ordercurrencyForm").serialize(),
			success:function (data){
				if(data==1){
					alert("保存成功！");
					window.parent.closeDataOrderWin();
				}else{
					alert("保存失败！");
				}
			}
		});
    }
   
    function returnBack(){
    	window.location.href = 'cts/findDataDicationaryList.action?toOrder=true&type=<s:property value="#request.type"/>&typeDetail=<s:property value="#request.typeDetail"/>';
    }
</script>
<body style="background: none;">
     <form action="cts/saveOrderDataDictionary.action" method="post" id="ordercurrencyForm" name="ordercurrencyForm">
    	<s:hidden id="type" name="type" value="%{#request.type}"/>
  		<s:hidden id="typeDetail" name="typeDetail" value="%{#request.typeDetail}"/>
       	 		<div id="tableContent" style="width:700px;">
       	 			<div style="width:100%;border-bottom:1px solid gray;">
       	 				<span>
					        排序
       	 				</span>
       	 				<span style="margin-left: 500px">
					        <a href="javascript:saveOrder();"><s:text name="保存"/></a>&nbsp;&nbsp;
					 		<a href="javascript:returnBack();"><s:text name="重置"/></a>
       	 				</span>
       	 			</div>
			        <input type="hidden" id="param" name="param"/>
			    	<div class="sortable-container" style="margin-top: 10px;padding-top: 10px">     
			         <ul id="selectedDic" class="ulClass">
			 			<s:iterator value="%{#request.list}">
				 			<li id="<s:property value="id"/>" class="liClass">
				 				<s:property value="orderNo"/>.&nbsp;<s:property value="name"/>
				 			</li>
			 			</s:iterator>
			 		</ul>
			 		</div>
		   		</div>
 	</form>
</body>
</html>









